<template>
  <div class="app-container single">
    <el-row>
      <el-col :span="24">
        <el-space direction="vertical" class="vertical">
          <el-card shadow="never" v-loading="loading.form1">
            <h3>抗震能力/极限状态四个临界值设置：</h3>
            <p>
              {{ form1.v1 }}%、{{ form1.v2 }}%、{{ form1.v3 }}%、{{ form1.v4 }}%四个临界值划分成五个区间，
              分别为&lt;={{ form1.v1 / 100 }}、({{ form1.v1 / 100 }},{{ form1.v2 / 100 }}]、
              ({{ form1.v2 / 100 }},{{ form1.v3 / 100 }}]、({{ form1.v3 / 100 }},{{ form1.v4 / 100
              }}]、>=0.9五个区间对应五个等级（V、IV、III、II、I）
            </p>
            <el-row>
              <!-- <el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="12" style="display: flex;align-items: center;"> -->
              <el-col style="display: flex;align-items: end;">
                <el-form :model="form1" :rules="rules1" ref="form1Ref">
                  <el-space>
                    <div class="color-div" style="background-color: #ffcc99;"></div>
                    <el-form-item prop="v1">
                      <el-input v-model="form1.v1" class="color-input" v-padEnd="2"><template
                          #append>%</template></el-input>
                    </el-form-item>
                    <div class="color-div" style="background-color: #ffcc33;"></div>
                    <el-form-item prop="v2">
                      <el-input v-model="form1.v2" class="color-input" v-padEnd="2"><template
                          #append>%</template></el-input>
                    </el-form-item>
                    <div class="color-div" style="background-color: #ffcc66;"></div>
                    <el-form-item prop="v3">
                      <el-input v-model="form1.v3" class="color-input" v-padEnd="2"><template
                          #append>%</template></el-input>
                    </el-form-item>
                    <div class="color-div" style="background-color: #ff9900;"></div>
                    <el-form-item prop="v4">
                      <el-input v-model="form1.v4" class="color-input" v-padEnd="2"><template
                          #append>%</template></el-input>
                    </el-form-item>
                    <div class="color-div" style="background-color: #ff0000;"></div>
                  </el-space>
                  <ArrowRight />
                </el-form>
                <el-button plain @click="save('1')" style="margin-left: 50px">保存</el-button>
              </el-col>
            </el-row>
            <!-- <el-row justify="end"><el-button @click="save('1')">保存</el-button></el-row> -->
          </el-card>
          <el-card shadow="never" v-loading="loading.form2">
            <h3>死亡人数四个临界值设置（单位：人）：</h3>
            <p>
              {{ form2.v1 }}、{{ form2.v2 }}、{{ form2.v3 }}、{{ form2.v4 }}四个临界值划分成五个区间；
              新疆、青海和西藏地区{{ form2.xqxV1 }}、{{ form2.xqxV2 }}、{{ form2.xqxV3 }}、{{ form2.xqxV4 }}四个临界值划分成五个区间（V、IV、III、II、I）
            </p>
            <el-row>
              <el-col style="display: flex;align-items: end;">
                <el-form :model="form2" ref="form2Ref">
                  <el-space>
                    <div class="color-div" style="background-color: #FFCC99;"></div>
                    <el-input v-model="form2.v1" class="color-input" v-inputNumber="0"></el-input>
                    <div class="color-div" style="background-color: #FFCC33;"></div>
                    <el-input v-model="form2.v2" class="color-input" v-inputNumber="0"></el-input>
                    <div class="color-div" style="background-color: #FFCC66;"></div>
                    <el-input v-model="form2.v3" class="color-input" v-inputNumber="0"></el-input>
                    <div class="color-div" style="background-color: #FF9900;"></div>
                    <el-input v-model="form2.v4" class="color-input" v-inputNumber="0"></el-input>
                    <div class="color-div" style="background-color: #FF0000;"></div>
                  </el-space>
                  <ArrowRight />
                  <p>新疆、青海和西藏地区</p>
                  <el-space>
                    <div class="color-div" style="background-color: #FFCC99;"></div>
                    <el-input v-model="form2.xqxV1" class="color-input" v-inputNumber="0"></el-input>
                    <div class="color-div" style="background-color: #FFCC33;"></div>
                    <el-input v-model="form2.xqxV2" class="color-input" v-inputNumber="0"></el-input>
                    <div class="color-div" style="background-color: #FFCC66;"></div>
                    <el-input v-model="form2.xqxV3" class="color-input" v-inputNumber="0"></el-input>
                    <div class="color-div" style="background-color: #FF9900;"></div>
                    <el-input v-model="form2.xqxV4" class="color-input" v-inputNumber="0"></el-input>
                    <div class="color-div" style="background-color: #FF0000;"></div>
                  </el-space>
                  <ArrowRight />
                </el-form>
                <el-button plain @click="save('2')" style="margin-left: 50px">保存</el-button>
              </el-col>
            </el-row>
            <!-- <el-row justify="end"><el-button @click="save('2')">保存</el-button></el-row> -->
          </el-card>
          <el-card shadow="never" v-loading="loading.form3">
            <h3>直接经济损失/区域内上年度 GDP四个临界值设置：</h3>
            <p>
              {{ form3.v1 }}%、{{ form3.v2 }}%、{{ form3.v3 }}%、{{ form3.v4 }}%四个临界值划分成五个区间；
              新疆、青海和西藏地区{{ form3.xqxV1 }}%、{{ form3.xqxV2 }}%、{{ form3.xqxV3 }}%、{{ form3.xqxV4 }}%四个临界值划分成五个区间（V、IV、III、II、I）
            </p>
            <el-row>
              <el-col style="display: flex;align-items: end;">
                <el-form :model="form3" :rules="rules3" ref="form3Ref">
                  <el-space>
                    <div class="color-div" style="background-color: #FFCC99;"></div>
                    <el-form-item prop="v1">
                      <el-input v-model="form3.v1" class="color-input" v-padEnd="2"><template
                          #append>%</template></el-input>
                    </el-form-item>
                    <div class="color-div" style="background-color: #FFCC33;"></div>
                    <el-form-item prop="v2">
                      <el-input v-model="form3.v2" class="color-input" v-padEnd="2"><template
                          #append>%</template></el-input>
                    </el-form-item>
                    <div class="color-div" style="background-color: #FFCC66;"></div>
                    <el-form-item prop="v3">
                      <el-input v-model="form3.v3" class="color-input" v-padEnd="2"><template
                          #append>%</template></el-input>
                    </el-form-item>
                    <div class="color-div" style="background-color: #FF9900;"></div>
                    <el-form-item prop="v4">
                      <el-input v-model="form3.v4" class="color-input" v-padEnd="2"><template
                          #append>%</template></el-input>
                    </el-form-item>
                    <div class="color-div" style="background-color: #FF0000;"></div>
                  </el-space>
                  <ArrowRight />
                  <p>新疆、青海和西藏地区</p>
                  <el-space>
                    <div class="color-div" style="background-color: #FFCC99;"></div>
                    <el-form-item prop="xqxV1">
                      <el-input v-model="form3.xqxV1" class="color-input" v-padEnd="2"><template
                          #append>%</template></el-input>
                    </el-form-item>
                    <div class="color-div" style="background-color: #FFCC33;"></div>
                    <el-form-item prop="xqxV2">
                      <el-input v-model="form3.xqxV2" class="color-input" v-padEnd="2"><template
                          #append>%</template></el-input>
                    </el-form-item>
                    <div class="color-div" style="background-color: #FFCC66;"></div>
                    <el-form-item prop="xqxV3">
                      <el-input v-model="form3.xqxV3" class="color-input" v-padEnd="2"><template
                          #append>%</template></el-input>
                    </el-form-item>
                    <div class="color-div" style="background-color: #FF9900;"></div>
                    <el-form-item prop="xqxV4">
                      <el-input v-model="form3.xqxV4" class="color-input" v-padEnd="2"><template
                          #append>%</template></el-input>
                    </el-form-item>
                    <div class="color-div" style="background-color: #FF0000;"></div>
                  </el-space>
                  <ArrowRight />
                </el-form>
                <el-button plain @click="save('3')" style="margin-left: 50px">保存</el-button>
              </el-col>
            </el-row>
            <!-- <el-row justify="end"><el-button @click="save('3')">保存</el-button></el-row> -->
          </el-card>
        </el-space>
      </el-col>
    </el-row>
  </div>
</template>
<script setup name="single-index">
import ArrowRight from '@/views/buildingRiskZoning/standardSetting/components/arrowRight'
import { singleSave, getSingle } from '@/api/buildingRiskZoning/standardSetting/index'
import { rangeValidate } from '@/utils/validate'

const { proxy } = getCurrentInstance()

const form1 = ref({})
const form2 = ref({})
const form3 = ref({})
const loading = ref({
  form1: false,
  form2: false,
  form3: false
})
const rules1 = {
  v1: [{ validator: rangeValidate, closure: 'right', max: 100, message: '最大值不能超过100', trigger: 'blur' }],
  v2: [{ validator: rangeValidate, closure: 'right', max: 100, message: '最大值不能超过100', trigger: 'blur' }],
  v3: [{ validator: rangeValidate, closure: 'right', max: 100, message: '最大值不能超过100', trigger: 'blur' }],
  v4: [{ validator: rangeValidate, closure: 'right', max: 100, message: '最大值不能超过100', trigger: 'blur' }]
}
const rules3 = {
  v1: [{ validator: rangeValidate, closure: 'right', max: 100, message: '最大值不能超过100', trigger: 'blur' }],
  v2: [{ validator: rangeValidate, closure: 'right', max: 100, message: '最大值不能超过100', trigger: 'blur' }],
  v3: [{ validator: rangeValidate, closure: 'right', max: 100, message: '最大值不能超过100', trigger: 'blur' }],
  v4: [{ validator: rangeValidate, closure: 'right', max: 100, message: '最大值不能超过100', trigger: 'blur' }],
  xqxV1: [{ validator: rangeValidate, closure: 'right', max: 100, message: '最大值不能超过100', trigger: 'blur' }],
  xqxV2: [{ validator: rangeValidate, closure: 'right', max: 100, message: '最大值不能超过100', trigger: 'blur' }],
  xqxV3: [{ validator: rangeValidate, closure: 'right', max: 100, message: '最大值不能超过100', trigger: 'blur' }],
  xqxV4: [{ validator: rangeValidate, closure: 'right', max: 100, message: '最大值不能超过100', trigger: 'blur' }]
}

const save = (type) => {
  let data = {}
  if (type == '1') {
    data = { ...form1.value, type }
  } else if (type == '2') {
    data = { ...form2.value, type }
  } else {
    data = { ...form3.value, type }
  }
  proxy.$refs[`form${type}Ref`].validate((valid) => {
    if (valid) {
      singleSave(data).then(res => {
        if (res.code == 200) {
          proxy.$modal.msgSuccess('保存成功！')
          type == '1' && getData('1')
          type == '2' && getData('2')
          type == '3' && getData('3')
        }
      })
    }
  })
}

const getData = (type) => {
  loading.value[`form${type}`] = true
  getSingle({ type }).then(res => {
    if (res.code == 200) {
      if (type == '1') {
        form1.value = res.data
      } else if (type == '2') {
        form2.value = res.data
      } else {
        form3.value = res.data
      }
    }
    loading.value[`form${type}`] = false
  }).catch(() => loading.value[`form${type}`] = false)
}
onMounted(() => {
  getData('1')
  getData('2')
  getData('3')
})
</script>
<style scoped lang="scss">
.app-container {
  min-width: 1000px;
}

:deep(.vertical.el-space) {
  width: 100%;

  &>.el-space__item {
    width: 100%;
  }
}

.single .el-form-item {
  margin: 0;
}
</style>